<template>
	<CustomNavBar />
	<scroll-view refresher-enabled :refresher-triggered="isRefreshTriggered" @refresherrefresh="onRefresherrefresh"
		@scrolltolower="onScrolltolower" class="scroll-view-self" scroll-y>

		<IndexSkeleton v-if="isLoading"></IndexSkeleton>
		<template v-else>
			<ZGQSwiper :itemList="bannerItemList" />
			<CategoryPanel :itemList="categoryItemList" />
			<HotPanel :list="hotItemList" />
			<ZGQLike ref="likeRef" />
		</template>
	</scroll-view>
</template>

<script setup lang="ts">
import { getHomeCategoryAPI, getHomeHotAPI, getHomeSwiper } from '@/services/home.ts'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
import CustomNavBar from './components/CustomNavBar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import IndexSkeleton from './components/IndexSkeleton.vue'
import type { ZGQLikeInstance } from '@/components/components'

// 查询轮播图
const bannerItemList = ref<BannerItem[]>([])
const queryHomeSwiper = async () => {
	const result = await getHomeSwiper()
	bannerItemList.value = result.result
}

// 查询分类
const categoryItemList = ref<CategoryItem[]>([])
const queryHomeCategory = async () => {
	const result = await getHomeCategoryAPI()
	categoryItemList.value = result.result
}

// 查询热门
const hotItemList = ref<HotItem[]>([])
const queryHomeHot = async () => {
	const result = await getHomeHotAPI()
	hotItemList.value = result.result
}

// 滚动触底
const likeRef = ref<ZGQLikeInstance>()
const onScrolltolower = () => {
	likeRef.value?.loadMore()
}

// 下拉刷新
const isRefreshTriggered = ref(false)
const onRefresherrefresh = async () => {
	isRefreshTriggered.value = true
	await Promise.all([queryHomeSwiper(), queryHomeCategory(), queryHomeHot(), likeRef.value?.loadFirstPage()])
	isRefreshTriggered.value = false
}

const isLoading = ref(false)
onLoad(async () => {
	isLoading.value = true
	await Promise.all([
		queryHomeSwiper(),
		queryHomeCategory(),
		queryHomeHot()
	])
	isLoading.value = false
})

</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.scroll-view-self {
	flex: 1;
}
</style>
